<template>
  <div>
    <Row :gutter="20">
      <i-col
        :xs="12"
        :md="8"
        :lg="4"
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height: 120px; padding-bottom: 10px"
      >
        <infor-card
          shadow
          :color="infor.color"
          :icon="infor.icon"
          :icon-size="36"
        >
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px">
        <Card shadow>
          <chart-pie
            style="height: 300px"
            :value="pieData"
            :text="pieDataTitle"
            ref="child"
          ></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px">
        <Card shadow>
          <chart-bar
            style="height: 300px"
            :value="barData"
            :text="barDataTitle"
            ref="child2"
          />
        </Card>
      </i-col>
    </Row>
    <Row>
      <Card shadow>
        <example
          style="height: 310px"
          :xaxis="xaxis"
          :seriesData="seriesData"
          ref="child3"
        />
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import { mapActions } from 'vuex'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data() {
    return {
      inforCardDataTitle: '',
      barDataTitle: '',
      pieDataTitle: '',
      inforCardData: [],
      pieData: [],
      barData: [],
      seriesData: [],
      xaxis: []
    }
  },
  mounted() {
    //
    this.init()
  },
  methods: {
    ...mapActions(['getHomeInfo', 'getUserInfo', 'getHomerpt']),
    init() {
      this.getHomerpt().then((res) => {
        this.seriesData = res.data.series
        this.xaxis = res.data.xaxis
        this.$refs.child3.resize()
        console.log(this.seriesData, 'hkjhkug')
      })
      this.getHomeInfo().then((res) => {
        this.inforCardData = res.data.inforCardData.data
        this.barData = res.data.barData.data
        this.pieData = res.data.pieData.data
        this.inforCardDataTitle = res.data.inforCardData.title
        this.barDataTitle = res.data.barData.data.title
        this.pieDataTitle = res.data.pieData.data.title
        this.$refs.child.resize()
        this.$refs.child2.resize()
      })
    }
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
.loadingStyle {
}
</style>
